<template>
  <div>
    <!-- <el-button type="primary" :icon="Plus" @click="addSpu" :disabled="!categoryStore.category3Id" class="mb-10">添加SPU</el-button> -->
    <el-button type="primary" :icon="Plus" @click="addSpu" class="mb-10">添加SPU</el-button>

    <el-table :data="spuList" border class="mb-10">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column label="SPU名称" property="spuName"></el-table-column>
      <el-table-column label="SPU描述" property="description"></el-table-column>
      <el-table-column label="操作" width="240">
        <template #default="{ row, $index }">
          <el-button type="success" :icon="Plus" size="small" title="新增SKU" @click="addSku(row)"></el-button>
          <el-button type="warning" :icon="Edit" size="small" title="修改SPU" @click="editSpu(row)"></el-button>
          <el-button type="info" :icon="InfoFilled" size="small" title="查看SKU列表" @click="showSkuList(row)"></el-button>
          <el-popconfirm :title="`确认要删除[${row.spuName}]吗?`" @confirm="deleteSpu(row)">
            <template #reference>
              <el-button type="danger" :icon="Delete" size="small" title="删除SPU"></el-button>
            </template>
          </el-popconfirm>
          <!-- <el-button type="danger"  :icon="Delete" size="small" title="删除SPU"></el-button> -->

        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:currentPage="page" v-model:page-size="limit" :total="total" :page-sizes="[3, 6, 9]"
      layout="prev, pager, next, jumper, -> , sizes, total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />

    <el-dialog
    width="70%"
     v-model="dialogTableVisible" 
    :title="`【${skuDialogTitle}】的sku列表`"
    :before-close="beforeClose"
    >
      <el-table :data="skuList"   v-loading="skuLoading">
        <el-table-column property="skuName" label="名称" width="150" />
        <el-table-column property="price" label="价格" width="200" />
        <el-table-column property="weight" label="重量" />
        <el-table-column label="默认图片">
          <template #default="{row,$index}">
            <img :src="row.skuDefaultImg" style="width:100px;height:100px">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

import spuApi, { type SpuListModel, type SpuModel } from '@/api/spu';
import skuApi ,{type SkuModel} from "@/api/sku";
import { SPUSTATUS } from '../../index.vue'
import { Plus, Delete, Edit, InfoFilled } from '@element-plus/icons-vue'
import { useCategoryStore } from '@/stores/category';
import { result } from 'lodash';
import { ElMessage } from 'element-plus';
const categoryStore = useCategoryStore();
const emits = defineEmits(['update:modelValue', 'spuInfo']);

const addSpu = () => {

  emits('update:modelValue', SPUSTATUS.SPUFORM)
}


const editSpu = (row: SpuModel) => {
  emits('spuInfo', row);
  emits('update:modelValue', SPUSTATUS.SPUFORM)
}

const deleteSpu = async (row: SpuModel) => {
  // console.log(row.id)
  try {
    await spuApi.delete(row.id as number);
    ElMessage.success("删除成功");
    if (spuList.value?.length == 1 && page.value != 1) {
      page.value -= 1;
    }
    getPage();
  } catch (err) {
    console.log('删除失败', err);
    ElMessage.error("删除失败")

  }
}

const addSku = (row: SpuModel) => {

  emits('update:modelValue', SPUSTATUS.SKUFORM);
  emits('spuInfo', row);
}




// 分页
const page = ref(1);
const limit = ref(3);
const total = ref(0);
const handleSizeChange = (val: number) => {
  limit.value = val;
  getPage();
}
const handleCurrentChange = (val: number) => {
  page.value = val;
  getPage();
}

// 表格展示数据
const spuList = ref<SpuListModel>();
const getPage = async () => {
  try {
    let result = await spuApi.getPage(page.value, limit.value, categoryStore.category3Id as number);
    total.value = result.total;
    spuList.value = result.records;
  } catch (error) {
    console.error(error);
    ElMessage.error('获取SPU列表失败,请重试')
  }
}

watch(() => categoryStore.category3Id, (nval) => {
  if (!nval) {
    spuList.value = [];
    return
  }
  getPage();
}, { immediate: true })


//查看skuList
const dialogTableVisible=ref(false);

 const skuDialogTitle = ref('');
const skuList =ref<SkuModel[]>()
const showSkuList = async(row: SpuModel) => {
     skuDialogTitle.value=row.spuName;
     dialogTableVisible.value=true;
     skuLoading.value=true;
    try{
      let result= await skuApi.findBySpuId(row.id as number);
      skuList.value=result;
      ElMessage.success("获取skuList信息成功");
      skuLoading.value=false;

    }catch(err){
      console.log(err)
      ElMessage.error("获取skuList信息失败");
      skuLoading.value=false;

    }
}

//设置加载中
const skuLoading=ref(false);
//请求数据前变成true;
//请求数据后贬称false;

const beforeClose=(done:any)=>{
  skuList.value=[];
  done();
}
</script>

<style scoped>
</style>